<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #F5F5F5;
			}
			.mui-pages {
				top: 46px;
				height: auto;
			}
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #F5F5F5;
				padding: 8px 0;
			}
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}
			.mui-page {
				display: block;
			}
			.mui-pages .mui-page {
				display: block;
			}
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			.head {
				height: 40px;
			}
			#head {
				line-height: 40px;
			}
			.head-img {
				width: 40px;
				height: 40px;
			}
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			.update {
				font-style: normal;
				color: #999999;
				margin-right: -25px;
				font-size: 15px
			}
			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}
			
			#app-info {
				padding-top: 20px;
				width: 100%;
				text-align: center;
			}
			
			#app-info .miao-icon {
				margin: 0px auto;
				width: 90px;
				height: 90px;
				border-radius: 10px;
			}
			
			#app-info h5 {
				font-size: 16px;
				font-weight: 600;
			}
			
			#app-info p {
				font-size: 14px;
			}
			
			#cache-btn {
				padding-right: 20px;
			}
		</style>
	</head>

	<body class="mui-fullscreen">
		<div id="bar-cover" style="
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 20px;
			display: none;
			z-index: 100;
			background-image: url('img/bar-cover.png');
			background-color: rgba(255, 255,255, 0.9);
			background-repeat: repeat-x;
			background-size: contain;
		"></div>

		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div id="app-info">
							<img class="miao-icon" src="img/miao_180.png" />
							<h5 id="app-version">V2.1.0</h5>
							<p id="miao-say"></p>
						</div>
						<ul class="mui-table-view mui-table-view-chevron" id="user-info" style="display: none;">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" href="#account">
									<img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
									<div class="mui-media-body">
										Hello MUI
										<p class='mui-ellipsis'>账号:hellomui</p>
									</div>
								</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell clear">
								<a id="cache-btn" href="#rate">清除缓存 <span id="mb-size" class="mui-pull-right">0MB</span></a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron" id="gift-delivery">
							<li class="mui-table-view-cell">
								<a id="gift" href="#rate" class="mui-navigate-right">徽章兑换</a>
							</li>
							<li class="mui-table-view-cell">
								<a id="my-gift" href="#general" class="mui-navigate-right">我的奖品</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a id="rate" href="#rate" class="mui-navigate-right">去好评</a>
							</li>
							<li class="mui-table-view-cell">
								<a id="tucao" href="#general" class="mui-navigate-right">去吐槽</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a id="copyright" href="#privacy" class="mui-navigate-right">版权声明</a>
							</li>
							<li class="mui-table-view-cell">
								<a id="rookie" href="#general" class="mui-navigate-right">新手指南</a>
							</li>
						</ul>
						<ul class="mui-table-view" id="logout-button">
							<li class="mui-table-view-cell logout" style="text-align: center;">
								<a>退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>

	</body>
	<script src="js/mui.min.js "></script>
	<script src="js/av-mini-1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/lunar.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/settings.js" type="text/javascript" charset="utf-8"></script>

</html>